<div class="login-form-wrap">
  <form class="login-form" nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-tabset [nzAnimated]="false">
      <nz-tab nzTitle="账户密码登录">
        <nz-form-item>
          <nz-form-control nzErrorTip="账号名：admin">
            <nz-input-group nzPrefixIcon="user" [nzSize]="'large'">
              <input type="text" formControlName="userName" nz-input placeholder="用户名" [placeholder]="'账号名：admin'" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control nzErrorTip="密码：a123456">
            <nz-input-group nzPrefixIcon="lock" [nzSize]="'large'">
              <input type="password" autocomplete="on" formControlName="password" nz-input placeholder="密码" [placeholder]="'密码：a123456'" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </nz-tab>

      <nz-tab nzTitle="手机号登录">
        <nz-form-item>
          <nz-form-control nzErrorTip="请输入用户名!">
            <nz-input-group nzPrefixIcon="mobile" [nzSize]="'large'">
              <input type="text" autocomplete="on" formControlName="userName" nz-input placeholder="手机号" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row nzJustify="space-between">
          <nz-form-control class="flex-1" nz-col nzErrorTip="请输入验证码!" style="max-width: 65%" [nzSm]="16" [nzXs]="15">
            <nz-input-group nzPrefixIcon="mail" [nzSize]="'large'">
              <input type="password" formControlName="password" nz-input placeholder="密码" />
            </nz-input-group>
          </nz-form-control>
          <button class="p-0" nz-button nz-col nzType="default" [nzSize]="'large'" [nzSm]="7" [nzXs]="7">获取验证码</button>
        </nz-form-item>
      </nz-tab>
    </nz-tabset>
    <div class="login-form-margin" nz-row>
      <div nz-col [nzSpan]="12">
        <label formControlName="remember" nz-checkbox>
          <span>自动登录</span>
        </label>
      </div>
      <div nz-col [nzSpan]="12">
        <a class="login-form-forgot">忘记密码</a>
      </div>
    </div>
    <button class="login-form-button login-form-margin" nz-button nzSize="large" [nzType]="'primary'">登 录</button>
    <div class="other-way">
      <div class="other-login">
        <span>其他方式登陆</span>
        <i nz-icon nzTheme="fill" nzType="alipay-circle"></i>
        <i nz-icon nzTheme="fill" nzType="taobao-circle"></i>
        <i nz-icon nzTheme="fill" nzType="weibo-circle"></i>
      </div>
      <a routerLink="/login/register-form">注册用户</a>
    </div>
  </form>
</div>
